<template>
  <div class="lsc-mycenter-news">
    <van-nav-bar
      title="资讯公告"
      left-arrow
      @click-left="onClickBack"
    />
    <van-notice-bar mode="link" @click="toNewsDetails(hotNews.id)">
      {{hotNews.title}}
    </van-notice-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="lsc-mycenter-news-base">
        <span>资讯</span>
        
          <van-row v-for="(item,index) in newsList" :key="index">
            <van-col span="17">
              <router-link :to="'/newsdetails?id=' + item.id">{{item.title}}</router-link>
            </van-col>
            <van-col span="1">&nbsp;</van-col>
            <van-col span="6">{{item.createtime}}</van-col>
          </van-row>
      </div>
    </van-list>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'news',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      newsList: [],
      loading: false,
      finished: false,
      hotNews: {},
      pageinfo: {
        pagesize: 10,
        pageindex: 0,
        total: 0
      }
    }
  },
  created() {
    this.getHotNews()
    // 获取会员基础信息
    this.$store.dispatch('fetchBaseInfo')
  },
  methods: {
    onClickBack() {
      this.$router.push('/mycenter')
    },
    getNewsItems() {
      this.axios.get(api.masterData.news, {params: this.pageinfo})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.newsList = res.data.data
            this.pageinfo.total = res.data.pageinfo.total
          }
        })
    },
    getHotNews() {
      this.axios.get(api.masterData.top1News)
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.hotNews = res.data.data
          }
        })
    },
    toNewsDetails(id) {
      this.$router.push({path: '/newsdetails', query: {id: id}})
    },
    onLoad() {

      this.loading = true;
      this.pageinfo.pageindex += 1
      setTimeout(()=>{
        
        this.axios.get(api.masterData.news, {params: this.pageinfo})
          .then((res) => {
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.newsList = res.data.data
              this.loading = false;
              if (this.newsList.length >= res.data.pageinfo.total) {
                this.finished = true;
              }else {
                this.finished = false;
              }
            }
          })
      }, 500)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.lsc-mycenter-news-base {
  background: #fff;
  padding-bottom: 20px;
}
.lsc-mycenter-news-base span {
  line-height: 40px;
  background: #e5e5e5;
  display: block;
  padding-left: 10px;
  font-size: 14px;
}
.lsc-mycenter-news-base>.van-row {
  padding: 0 10px;
  margin-top: 15px;
}
</style>
